<template>
  <h1 @click="$router.back()">我是detail, 我要播放{{ filmId }}编号的电影</h1>
  <h3 @click="toDetail">猜你喜欢</h3>
</template>

<!-- 下面这些是voa形式的结合路由的操作，下面有vca结合setup语法糖格式的 -->
<!-- <script>
export default {
  data() {
    return {
      filmId: "",
    };
  },
  mounted() {
    console.log(this.$route.params);
    this.filmId = this.$route.params.filmId;
  },
  methods: {
    toDetail() {
      this.$router.push("/detail/1123");
    },
  },
  // 这是比较笨的方法，就是通过watch监听当前路由的params，来看访问的电影详情id是否改变，其实vue-router提供了一个很好用的钩子，叫做beforeRouteUpdate
  // watch: {
  //   "$route.params": function (newVal) {
  //       this.filmId = newVal.filmId;
  //   },
  // },
  // 注意这个钩子的执行时间是更新之前，比如你要从id为1的跳到id为2的，这个时候this.$route.params.filmId依然是1，你需要在to里面拿到。to就是目标路由也就是要跳到的路由，from就是来自哪个路由
  beforeRouteUpdate(to, from) {
    this.filmId = to.params.filmId;
  },
  // 该钩子的执行时间是跳转到当前组件对应的路由这里之前，也就是进门之前。t
  beforeRouteEnter(to, from) {
    console.log(from);
    alert(`您想从${from.name}来我这里? `);
  },
  // 该钩子的执行时间就是从当前组件对应的路由离开之前
  beforeRouteLeave(to, from) {
    alert(`您想去${to.name}? `);
  },
};
</script> -->

<script setup>
import { ref } from "vue";
// 我们想要在vca中使用$router和$route，首先要引入useRoute和useRouter
// 而onBeforeRouteUpdate和onBeforeRouteLeave对应的正是beforeRouteUpdate和beforeRouteLeave钩子
// 有一个要注意的东西就是，vca中移除了beforeRouteEnter这个钩子，所以如果你实在想用，可以另起一个script标签，使用voa形式。但是这种方式我们极度不提倡，所以请移步至全局路由那里去做一些拦截操作吧，一般来说拦截写在全局里就够用了的。
import {
  onBeforeRouteUpdate,
  useRoute,
  useRouter,
  onBeforeRouteLeave,
} from "vue-router";

// 然后调用这两个api，拿到route和router，分别对应voa时候的$route和$router
const route = useRoute();
const router = useRouter();

const filmId = ref(route.params.filmId);
const toDetail = () => {
  router.push(`/detail/1132`);
};

// onBeforeRouteUpdate对应的正是beforeRouteUpdate
onBeforeRouteUpdate((to, from) => {
  console.log(to, from);
  filmId.value = to.params.filmId;
});

// onBeforeRouteLeave对应的正是beforeRouteLeave
onBeforeRouteLeave((to, from) => {
  alert(`您想去${to.name}? `);
});
</script>

<style lang="scss" scoped>
</style>